<template>
    <div class="dataSources-common">
        <!--配置项-->
        <div class="dataSources-common-left">
            <!--度量设置-->
            <div class="dimension">{{ chartLangI18n('common.dataField', '数据字段') }}</div>
            <div class="dimension_come">
                <vuedraggable class="setup" v-bind="{draggable: '.item-drag'}" v-model="config.dataSources.measures"
                              itemKey="fieldName"
                              :group="{name: 'measure'}" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                              chosenClass="chosenClass">
                    <template #item="{ element:item,index }">
                        <div class="setup_tuo" style="background: #9babed" @mouseenter="mouseenter(index,'measures')"
                             @mouseleave="mouseleave('null','measures')" :key="item.fieldName">
                            <rx-icon-show :icon="getIcon(item)"></rx-icon-show>
                            <a-input class="inpurlistinput" :title="item.fieldLabel"
                                     v-model:value="item.fieldLabel"></a-input>
                            <span class="icon_config" v-show="measuresId ==index">
                                <rx-icon-show icon="icon-lineicon-test21" @click="copyScript(item)"
                                              :title="chartLangI18n('common.copyScript','复制脚本')"/>
                                <rx-icon-show icon="icon-lineVue3_setting" @click="gestalt(item,index)"
                                              :title="chartLangI18n('common.format','格式化')"/>
                                <rx-icon-show icon="icon-lineVue3_delete" @click="dimensionDelete(index,'measures')"/>
                            </span>
                        </div>
                    </template>
                </vuedraggable>
                <div class="dimension_button" :title="chartLangI18n('common.dragMetric','从右侧拖入度量')">
                    {{ chartLangI18n('common.dragMetric', '从右侧拖入度量') }}
                </div>
            </div>
            <result-row-config v-model="config.dataSources.resultNum"></result-row-config>
        </div>
        <div class="dataSources-common-right">
            <!--数据模型-->
            <data-model
                :dataModel="dataModel"
                :config="config"
                :modelConfig="modelConfig"
                :getDataModel="getDataModel"
                :dimensionStart="()=>{}"
                :dimensionEnd="()=>{}"
                :measureStart="measureStart"
                :measureEnd="measureEnd"
                :hideDimensions="true"
            ></data-model>
        </div>
    </div>
</template>

<script>
import DataModel from "./data-model.vue";
import vuedraggable from "vuedraggable";
import ResultRowConfig from "./result-row-config.vue";
import DynamicFormat from "./dynamic-format.vue"
import {Util} from "@lowcode/jpaas-base-lib";

export default {
    name: "dynamic-data-setting",
    props: ["config", "dataModel", "modelConfig", "getDataModel"],
    components: {
        DataModel,
        vuedraggable,
        ResultRowConfig
    },
    data() {
        return {
            measuresId: "",
            parentId: ""
        }
    },
    created() {
        if (this.config.dataSources.dataModel) {
            this.getDataModel(this.config.dataSources.dataModel, false);
        }
    },
    methods: {
        tableI18n(name, text, key) {
            return this.$ti18(name, text, "tableLang", key);
        },
        chartLangI18n(name, text, key) {
            return this.$ti18(name, text, "chartLang", key);
        },
        measureStart(index) {
            this.parentId = index;
        },
        measureEnd(e) {
            this.parentId = e.oldIndex;
            let index = 0;
            let list = []
            this.modelConfig.measures[0].fields.filter(res => {
                if (!res.hide) {
                    list.push(res)
                }
            })
            for (let obj of this.config.dataSources.measures) {
                if (list[this.parentId].fieldName == obj.fieldName && list[this.parentId].tableName == obj.tableName) {
                    index++;
                }
            }
            if (index >= 2) {
                this.config.dataSources.measures.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.chartLangI18n('common.dragTips', '拖拉提示'),
                    description: this.chartLangI18n('common.repeatDrag', '不可重复拖拉'),
                    onClick: () => {

                    },
                });
            }
        },
        //鼠标移上去显示删除维度设置
        mouseenter(index, type, idx) {
            if (type == 'measures') {
                this.measuresId = index;
            }
        },
        mouseleave(name, type) {
            if (type == 'measures') {
                this.measuresId = name;
            }
        },
        //维度/度量删除
        dimensionDelete(index, type) {
            this.config.dataSources.measures.splice(index, 1);
        },
        copyScript(item) {
            let tag = document.createElement('input');
            tag.setAttribute('id', 'copyInput');
            tag.value = "${" + item.tableName + "_" + item.fieldName + "}";
            document.getElementsByTagName('body')[0].appendChild(tag);
            document.getElementById('copyInput').select();
            document.execCommand('copy');
            document.getElementById('copyInput').remove();
            this.$message.success("复制成功!");
        },
        //数据格式化
        gestalt(item, index) {
            let self = this;
            let conf = {
                curVm: self,
                component: DynamicFormat,
                title: this.tableI18n('formattedData', '格式化数据'),
                widthHeight: ['900px', '600px'],
                data: {
                    measuresContent: item
                },
                zIndex: 999,
            };
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                self.config.dataSources.measures[index] = data;
            });
        },
        //图标
        getIcon(obj) {
            if (obj.dataType == 'string') {
                return 'icon-lineField-String';
            } else if (obj.dataType == 'date') {
                return 'icon-lineriqi2';
            } else {
                return 'icon-lineshuzi';
            }
        },
    }
}
</script>

<style scoped>
.dataSources-common {
    width: 100%;
    height: 100%;
    display: flex;
    border: 1px solid #dadde0;
    border-radius: 10px;
}

.dataSources-common-left {
    flex: 1;
    padding:10px;
    border-right: 1px solid #dadde0;
    overflow: auto;
}

.dataSources-common-right {
    flex: 1;
    overflow: auto;
    padding:10px;
}

.dataSources-common-right::-webkit-scrollbar-thumb {
    display: none;
}

.dataSources-common-right:hover::-webkit-scrollbar-thumb {
    display: block;
}

.icon_config {
    display: flex;
    align-items: center;
    grid-gap: 0px 10px;
    cursor: pointer
}

.setup {
    margin-top: -14px;
    padding: 7px;
}

.setup > span {
    display: block;
    min-height: 90px;
}

.setup_tuo {
    background-color: #02c5b7;
    border-radius: 2px;
    display: flex;
    line-height: 26px;
    padding: 0 7px;
    color: white;
    margin-bottom: 5px;
    height: 30px;
}

.inpurlistinput {
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    font-size: 14px;
    line-height: 30px;
    flex: 1;
    margin-right: 10px;
}

.dimension_button {
    line-height: 30px;
    text-align: center;
    height: 30px;
    overflow: hidden;
    color: #c0c5cc;
    white-space: nowrap;
    padding: 0px 10px;
    text-overflow: ellipsis;
}

.dimension_come {
    margin-top: 10px;
    min-height: 90px;
    background-color: #ffffff;
    border-radius: 4px;
    border: dashed 1px #dadde0;
    padding-top: 15px;
    position: relative;
}

.basicDelete i {
    color: white;
}

.dimension_list span {
    color: #46494d;
    font-size: 12px;
    margin-left: 5px;
}

.dimension_list li {
    line-height: 30px;
    width: 100%;

}

.dimension_list li i:nth-child(1) {
    color: #a0b3ff;
}

.dimension_list li i:nth-child(3) {
    color: #c0c5cc;
    float: right;
    cursor: pointer;
}

.dimension {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 0px 5px;
}
</style>
